<template>
    <div>
        <h1>房间显示</h1>
        房号 <input type="text" v-model="Page.StoreId">
        房号名称 <input type="text" v-model="Page.Name">
        <input type="button" value="查询" @click="Show()">
        <table class="table">
            <thead>
                <tr>
                <th>编号</th>
                <th>房号</th>
                <th>房号名称</th>
                <th>账号</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="a in data">
                <th>{{a.Id}}</th>
                <th>{{a.StoreId}}</th>
                <th>{{a.Name}}</th>
                <th>{{a.UserZH}}</th>
                <th>
                    <input type="button" value="移除" @click="Del(a.Id)">
                    <input type="button" value="修改" @click="Upd(a.Id)">
                </th>
            </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(Page.PageIndex-1)">
        <input type="button" value="下一页" @click="Fanye(Page.PageIndex+1)">
        <input type="button" value="尾页" @click="Fanye(Total.TotalPage)">
        当前第{{Page.PageIndex}}页 共{{ Total.TotalPage }}页 共{{ Total.TotalCount }}行
        <select v-model="Page.PageSize" @click="Y">
            <option value="2">==2==</option>
            <option value="3">==3==</option>
            <option value="5">==5==</option>
        </select>
        <input type="text" v-model="Page.PageIndex">
        <input type="button" value="跳转" @click="T">
        <a href="/Add">添加房间信息</a>
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    import { useRouter,useRoute } from 'vue-router';
    const route = useRoute()
    const router = useRouter()
    const Upd=(vid:any)=>{
        router.push({path:"/Upd",query:{id:vid}});
    }
    const Del=(vid:any)=>{
        if(!confirm('确认删除吗。。。')){
            return
        }
        axios.get("https://localhost:7116/api/Store/DelStore",{params:{id:vid}}).then(res=>{
            if(res.data>0){
                alert('移除成功')
                Show()
            }
            else{
                alert('删除失败')
            }
        })
    }
    const Y=()=>{
        Show()
    }
    const T=()=>{
        Show()
    }
    const data = ref([{
        "Id": 0,
        "StoreId": 0,
        "Name": "",
        "UserZH": "",
        "UserPwd": ""
    }])
    const Page = ref({
        "PageIndex":1,
        "PageSize":2,
        "Name":"",
        "StoreId":0
    })
    const Total = ref({
        "TotalPage":1,
        "TotalCount":1
    })
    const Fanye=(e:any)=>{
        if(e>=1&&e<=Total.value.TotalPage){
            Page.value.PageIndex = e
            Show()
        }
    }
    onMounted(()=>{
        Show()
    })
    const Show=()=>{
        axios.get("https://localhost:7116/api/Store/GetAll",{params:Page.value}).then(res=>{
            data.value = res.data.data
            Total.value.TotalCount = res.data.count
            Total.value.TotalPage = Math.ceil(Total.value.TotalCount/Page.value.PageSize)
        })
    }
</script>

<style scoped>

</style>